<!--
 * 日常书签
 * @Author: xurenda <xurenda@qq.com>
 * @HomePage: https://xurenda.top
 * @Github: https://github.com/xurenda
 * @Date: 2019-10-10 23:14:54
 * @LastEditTime: 2019-12-06 21:42:11
 * @FilePath: \elegant-surf\src\components\home\DailyMarks.vue
 -->
<template>
<div id="dailyMarks">
  <div class="mark" v-for="(bookmark, index) in dailyMarks" :key="index">
    <a
      class="bookmark"
      :style="style"
      :href="bookmark.url"
      :title="bookmark.name"
      target="_blank"
    >
      <img :src="bookmark.icon" :alt="bookmark.name">
    </a>
    <i
      class="iconfont icon-gengduo1"
      title="修改快捷方式"
      @click.self="popupModal(bookmark, index)"
    ></i>
  </div>

  <!-- 弹出 修改快捷方式 -->
  <modal v-if="isModalShow">
    <template #title>修改快捷方式</template>
    <template #default>
      <label>
        <div>名称：</div>
        <input v-model="modalInput.name" type="text" />
      </label>
      <label>
        <div>网址：</div>
        <input v-model="modalInput.url" type="text" />
      </label>
      <label>
        <div>图标：</div>
        <input v-model="modalInput.icon" type="text" />
      </label>
    </template>
    <template #buttons>
      <button @click="isModalShow = false">取消</button>
      <button @click="modifyShortcuts">确定</button>
    </template>
  </modal>
</div>
</template>

<script>
import Modal from '@/components/common/Modal'
import { mapState } from 'vuex'
import { DAILY_MARKS } from '@/store/mutationsTypes'

export default {
  name: 'dailyMarks',
  components: { Modal },
  data() {
    return {
      // 弹出层是否显示
      isModalShow: false,
      // 弹出层 数据
      modalInput: {
        name: '',
        url: '',
        icon: '',
        index: 0
      }
    }
  },
  computed: {
    ...mapState({
      dailyMarks: state => state.dailyMarks, // 书签
      theme: state => state.appearanceSetting.theme, // 主题
      rounded: state => state.appearanceSetting.rounded // 圆角效果
    }),
    style() {
      let style = {}
      switch (this.theme) {
        case 'dark':
          style.backgroundColor = 'rgba(0, 0, 0, .5)'
          break;
        case 'light':
          style.backgroundColor = 'rgba(255, 255, 255, .5)'
          break;
      }
      if (this.rounded) style.borderRadius = '100px'
      return style
    }
  },
  methods: {
    /**
     * @description: 弹出对话框，并加入相应input的内容
     * @param {object} bookmark 书签
     * @param {number} index 索引
     */
    popupModal(bookmark, index) {
      this.isModalShow = true
      this.modalInput.name = bookmark.name
      this.modalInput.url = bookmark.url
      this.modalInput.icon = bookmark.icon
      this.modalInput.index = index
    },
    /**
     * @description: 修改快捷方式
     */
    modifyShortcuts() {
      const reg = /^(((http|ftp|https):)?\/\/)?[\w-_.]+(\/[\w-_]+)*\/?$/
      if (reg.test(this.modalInput.url)) {
        this.isModalShow = false
        this.$store.commit(DAILY_MARKS, this.modalInput)
      } else {
        window.alert('请输入正确的网址')
      }
    }
  }
}
</script>

<style lang="stylus">
#dailyMarks
  display grid
  grid-template-columns repeat(6, 48px)
  grid-template-rows repeat(1, 48px)
  grid-gap 56px
  .mark
    position relative
    .bookmark
      display flex
      justify-content center
      align-items center
      width 48px
      height 48px
      border-radius 12px
      text-decoration none
      img
        width 55%
    i.iconfont
      display none
      cursor pointer
      position absolute
      right -15px
      top -5px
    &:hover i.iconfont
      display block
</style>